<template>
	<view class="goodsList">
		<navigator
			url="./add"
			class="add"
		>
			<u-icon
				name="plus"
				color="#576b95"
				size="22"
			></u-icon>
		</navigator>
		<view
			class="row"
			v-for="item in goodsList"
			:key="item._id"
		>
			<view class="title">
				<uni-section
					:title="item.name"
					type="line"
				></uni-section>
			</view>
			<view
				class="goodsRow"
				v-for="row in item.proGroup"
				:key="row._id"
			>
				<view class="view">
					<view class="left">
						<image
							v-if="row.thumb.length"
							class="pic"
							:src="row.thumb[0].url"
							mode="aspectFill"
						></image>
						<image
							v-else
							class="pic"
							src="../../static/images/logo.png"
							mode="aspectFill"
						></image>
					</view>
					<view class="right">
						<view class="top">{{ row.name }}</view>
						<view class="info">
							<view
								class="icon"
								@click="clickEdit(row._id)"
							>
								<u-icon
									name="edit-pen"
									size="25"
								></u-icon>
							</view>
							<view
								class="icon"
								@click="clickRemove(row._id)"
							>
								<u-icon
									name="trash"
									size="25"
								></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<empty-data
			:show="!goodsList.length"
			mode="list"
		></empty-data>
	</view>
</template>

<script>
const goodsCloudObj = uniCloud.importObject('my-mall-goods');
export default {
	data() {
		return {
			goodsList: []
		};
	},
	// onLoad() {
	// 	this.getGoodsList();
	// },
	onShow() {
		this.isManage();
		this.getGoodsList();
	},
	methods: {
		// 点击跳转到修改页面
		async clickEdit(id) {
			uni.navigateTo({
				url: './add?id=' + id
			});
		},
		async getGoodsList() {
			let res = await goodsCloudObj.getList();
			this.goodsList = res.data;
		},
		clickRemove(id) {
			uni.showModal({
				title: '是否确认删除',
				success: (res) => {
					if (res.confirm) {
						this.removeGoods(id);
					}
				}
			});
		},
		async removeGoods(id) {
			let res = await goodsCloudObj.remove(id);
			console.log(res);
			this.getGoodsList();
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: $theme-back-color;
}
.goodsList {
	height: calc(100vh - 44px);
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	.row {
		border-bottom: 1px solid #ededed;
		padding: 25rpx 0;
		.title {
			margin-left: -20rpx;
		}

		.goodsRow {
			.view {
				display: flex;
				padding: 10rpx 0;
				@include flex-box();

				.left {
					width: 150rpx;
					height: 150rpx;

					.pic {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				.right {
					flex: 1;
					padding-left: 20rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					height: 150rpx;

					.top {
						font-size: 36rpx;
						font-weight: 600;
					}

					.info {
						display: flex;

						.icon {
							padding: 6rpx;
						}
					}
				}
			}
		}
	}
	.add {
		position: fixed;
		right: 30rpx;
		bottom: 80rpx;
		background-color: #fff;
		box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.07);
		padding: 30rpx;
		border-radius: 50%;
	}
}
</style>
